<div class="department_management">
    <div nz-row nzGutter="10" class="row_1">
        <div nz-col nzSpan="9" class="row_2">
            <button nz-button nzType="primary" (click)="handleShowModal()" *ngIf="bornRole.add">
                <i nz-icon nzType="plus"></i>新增
            </button>
            <button nz-button nzType="" (click)="handleShowModal(2)" [disabled]="deleteIds.length !== 1"
                [class]="deleteIds.length !== 1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'" *ngIf="bornRole.edit">
                <i nz-icon nzType="edit"></i>修改
            </button>
            <button nz-button nzType="" (click)="handleDelete()" [disabled]="deleteIds.length === 0"
                [class]="deleteIds.length === 0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'" *ngIf="bornRole.del">
                <i nz-icon nzType="delete"></i>删除
            </button>
            <button nz-button nzType="">
                <i nz-icon nzType="download"></i>导出
            </button>
        </div>
        <div nz-col nzSpan="4"></div>
        <div nz-col nzSpan="4">
            <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="handleDate($event)"></nz-range-picker>
        </div>
        <div nz-col nzSpan="4">
            <input appHotSearch (hotSearchEmit)="getList()" nz-input placeholder="输入部门名称搜索" [(ngModel)]="searchKey" />
        </div>
        <nz-select nzDropdownClassName="select_custom" nz-col nzSpan="3" [(ngModel)]="status" (ngModelChange)="handleStatus($event)" [nzSize]="100"
            nzPlaceHolder="状态">
            <nz-option nzValue="" nzLabel="全部"></nz-option>
            <nz-option nzValue="true" nzLabel="正常"></nz-option>
            <nz-option nzValue="false" nzLabel="禁用"></nz-option>
        </nz-select>
        <!-- <div nz-col nzSpan="4" class="operate_btn">
            <button nz-button nzType="" (click)="handleSearch()">
                <i nz-icon nzType="search"></i>搜索
            </button>
        </div> -->
    </div>
    <div nz-row class="row_3">
        <nz-table #expandTable [nzData]="listOfMapData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="isAllCheck" [nzIndeterminate]="isIndeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                    <th width="300">名称</th>
                    <th>状态</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let data of expandTable.data">
                    <ng-container *ngFor="let item of mapOfExpandedData[data.id]">
                        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
                            <td [nzShowCheckbox]="true" [(nzChecked)]="mapOfCheckedId[item.id]"
                                (nzCheckedChange)="checkItem(item, item.id, item.pid)"></td>
                            <td [nzShowExpand]="!!item.children" [nzIndentSize]="item.level * 20"
                                [(nzExpand)]="item.expand"
                                (nzExpandChange)="collapse(mapOfExpandedData[data.id], item, $event)">{{ item.name }}
                            </td>
                            <td>
                                <nz-switch [disabled]="!bornRole.edit" [(ngModel)]="item.enabled" (ngModelChange)="handleSwitch(item)"></nz-switch>
                            </td>
                            <td>{{ item.createTime }}</td>
                            <td>
                                <button nz-button nzType="primary" style="margin-right: 4px;"
                                    (click)="handleShowModal(item)" *ngIf="bornRole.edit">
                                    <i nz-icon nzType="edit"></i>
                                </button>
                                <!-- <button nz-button nzType="danger" (click)="handleDelete([item.id])">
                                    <i nz-icon nzType="delete"></i>
                                </button> -->
                            </td>
                        </tr>
                    </ng-container>
                </ng-container>
            </tbody>
        </nz-table>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal nzMaskClosable="false" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="isShowModal" [nzTitle]=" editId===-1? '新增部门' : '编辑部门'" (nzOnCancel)="handleCancel()" [nzFooter]="null" class="hmodal">
    <form nz-form [formGroup]="departmentForm" (ngSubmit)="handleSubmit()">
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>名称</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入部门名称">
                <input nz-input formControlName="departmentName" placeholder="请输入部门名称" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <nz-radio-group formControlName="departmentStatus">
                    <label nz-radio [nzValue]="true">启用</label>
                    <label nz-radio [nzValue]="false">停用</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="4">上级部门</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择上级部门">
                <nz-tree-select [nzDropdownStyle]="{left : '-200px'}" formControlName="pid" [nzNodes]="hztreeData"
                    [nzDropdownStyle]="{ 'max-height': '200px' }" nzPlaceHolder="请选择上级部门"
                    (ngModelChange)="handleHtree($event)" [nzAllowClear]="false"></nz-tree-select>
            </nz-form-control>
        </nz-form-item>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>